<template>
    <div class="Boxx">
        <img :src="props.space.s_img"/>
        <div class="infoBox">
            <div>
                <img :src="props.card.face"/>
            </div>
            <div>
                <p>
                    <span :style="{ 'color':props.card.vip.nickname_color?props.card.vip.nickname_color:'' }">{{ props.card.name }}</span>
                    <span v-show="props.card.sex !== '保密'">
                        <img src="@/assets/videoIcon/man.png" v-if="props.card.sex === '男'"/>
                        <img src="@/assets/videoIcon/woman.png"  v-else/>
                    </span>
                    <span>LV{{ props.card.level_info.current_level }}</span>
                    <span :style="getVipBack">{{ props.card.vip.label.text }}</span>
                </p>
                <p>
                    <span>{{ formatNum(props.card.attention) }} 关注</span>
                    <span>{{ formatNum(props.card.fans) }} 粉丝</span>
                    <span>{{ formatNum(props.like_num) }} 获赞</span>
                </p>
                <p v-show="props.card.Official.title">
                    <span>bilibili个人认证 {{ props.card.Official.title }}</span>
                </p>
                <p>
                    <span>{{ props.card.sign }}</span>
                </p>
                <p>
                    <el-button v-if="!props.following">+ 关注</el-button>
                    <el-button v-else disabled>已关注</el-button>
                    <el-button>发消息</el-button>
                </p>
            </div>
        </div>
    </div> 
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { upCardInfo } from '../typeInterface'
import { formatNum } from '@/utils/format'

interface Props extends upCardInfo{

}
const getVipBack = computed(() => {
    return {
        'background-color': props.card?.vip.nickname_color,
        'color': props.card?.vip.label.text_color
    }
})
const props = defineProps<Props>()
</script>

<style lang="scss" scoped>
p{
    padding: 0;
    margin: 0;
}
.Boxx{
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    & img:nth-child(1){
        width: 100%;
        height: 95px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
}
.infoBox{
    display: flex;
    padding: 10px 10px 0 0;
    & div:nth-child(1) img{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin: 0 10px;
    }
    & div:nth-child(2){
        display: flex;
        flex-direction: column;
        gap:10px
    }
    & div:nth-child(2) p:nth-child(1){
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: start;
        gap: 5px;
    }
    & div:nth-child(2) p:nth-child(1) span:nth-child(1){
        max-width: 50%;
        @include noWrap;
    }
    & div:nth-child(2) p:nth-child(1) span:nth-child(2) img{
        width: 20px;
        height: 20px;
    }
    & div:nth-child(2) p:nth-child(1) span:nth-child(3){
        height: 18px;
        scale: 0.8;
        border-radius: 4px;
        margin-left: 5px;
        padding: 0 2px;
        color:white;
        font-size: 12px;
        background: #e17055;
        -webkit-text-stroke: 1px white;
    }
    & div:nth-child(2) p:nth-child(1) span:nth-child(4){
        padding: 2px 4px;
        font-size: 12px;
        border-radius: 2px;
    }
    & div:nth-child(2) p:nth-child(2){
        display: flex;
        align-items: center;
        justify-content: start;
        gap: 10px;
    }
    & div:nth-child(2) p:nth-child(3){
        color: #9499A0;
        font-size: 12px;
    }
    & div:nth-child(2) p:nth-child(4){
        color: #9499A0;
        font-size: 12px;
    }
}
</style>